<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>志愿者服务活动中心多媒体展示系统</title>
    <style>
        ul{
            background: #0056b3;
            list-style-type: none; /*清除无序列表前的小点*/
            width: auto;
            height: 50px;
            text-align: center;
        }
        li{
            list-style-type: none;
            float: left;
            width: 130px;
            height: 100%;
            padding-left:15%;
            margin-right: 7%;  /*两个li之间的距离*/
        }
        a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
            color: #FFFFFF;
            background-color: #0056b3;
            text-align: center;
            line-height: 50px; /*li行高*/
            padding: 10px;
            text-decoration: none; /*去下划线*/
        }
        a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
            color: #000; /* 鼠标悬停时文字颜色变为黑色 */
            border: 1px solid #409eff;
            /* color: #fff; */
            background: hsla(0,0%,97.3%,0.3);
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        hr.custom-divider {
            border: none;
            height: 10px;
            width: 1466px;
            background-image: linear-gradient(to right, #ff6b6b, #7868e6, #56cfe1, #f7797d, #ff6b6b);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        }
        form {
            margin-top: 20px; /* 增加上边距 */
            text-align: center; /* 居中 */
        }

        input[type="text"] {
            padding: 10px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: 2px solid #ccc; /* 边框 */
            font-size: 16px; /* 字体大小 */
            width: 300px; /* 设置文本输入框宽度 */
            margin-right: 20px; /* 设置右边距 */
            margin-bottom: 25px;
        }

        button[type="submit"] {
            padding: 10px 20px; /* 增加内边距 */
            border-radius: 5px; /* 圆角边框 */
            border: none; /* 移除默认边框 */
            background: linear-gradient(to left, #64B5F6, #BBDEFB); /* 天蓝色渐变背景色 */
            color: black; /* 文本颜色 */
            font-size: 16px; /* 字体大小 */
            cursor: pointer; /* 鼠标指针样式 */
            transition: background-color 0.3s; /* 过渡效果 */
            margin-bottom: 25px;
        }

        button[type="submit"]:hover {
            background: linear-gradient(to right, #64B5F6, #BBDEFB); /* 鼠标悬停时的渐变背景色 */
        }
        table {
            width: 100%;
            margin: 0 auto; /* 设置表格居中对齐 */
            border-collapse: collapse; /* 合并单元格边框 */
        }

        th, td {
            padding: 10px; /* 设置单元格内边距 */
            border: 1px solid #CCC; /* 设置单元格边框 */
            text-align: center; /* 将链接居中对齐 */
        }

        img {
            width: 100%; /* 图片宽度填满单元格 */
            height: auto; /* 高度自适应，保持比例 */
            display: block; /* 图片在单元格内居中显示 */
            margin: 0 auto; /* 图片居中对齐 */
        }

        .error {
            background-color: #ffdddd; /* 淡红色背景 */
            color: #990000; /* 深红色文本 */
            text-align: center;
            margin-top: 5px;
            margin-left: 10px;
            font-size: 20px;
            display: inline-block;
        }
    </style>
    <script>
        function redirectToShow(){
            let title = document.getElementById("title");
            let errorMessage = document.getElementById("errorMessage");
            if(title.value === ""){
                errorMessage.innerHTML = "请输入查找内容";
                return false;
            }else {
                document.getElementById("select").action = "/content/select_user";
                document.getElementById("select").submit();
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="/content/index_user"> 文明山西 </a></li>
            <li><a href="/content/LFRX_user"> 雷锋热线 </a></li>
            <li><a href="/user/exit"> 退出登录 </a></li>
        </ul>

        <form id="select" name="form-select" method="get" enctype="application/x-www-form-urlencoded" align="center">
            <input id="title" name="title" type="text" placeholder="请输入查询的名称">
            <button type="submit" onclick="return redirectToShow()">查询</button>
            <div id="errorMessage" class="error"></div>
        </form>

        <table th:each = "c:${contents}">
            <tr>
                <td>
                    <img th:src="@{'/file/download?'(filename=${c.photo})}">
                </td>
            </tr>

            <tr>
                <td>
                    <a th:href="@{${c.link}}" th:text="${c.title}"></a>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <hr class="custom-divider">
                </td>
            </tr>
        </table>
    </div>

</body>
</html>